প্যারালাক্স স্ক্রলিং (Srallax Scrolling) ওয়েবসাইটের ভিজ্যুয়াল অভিজ্ঞতাকে আকর্ষণীয় করে তোলে। এটি সাধারণত CSS এবং JavaScript এর মাধ্যমে কনফিগার করা হয়। এই টিউটোরিয়ালে আমরা দেখব কিভাবে CSS এবং JavaScript ব্যবহার করে Srallax স্ক্রলিং ইফেক্ট তৈরি করা যায়।
CSS এর মাধ্যমে Srallax Scrolling কনফিগারেশন
CSS দিয়ে প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করার জন্য মূলত background-attachment, background-position, এবং transform প্রপার্টি ব্যবহার করা হয়। এখানে একটি উদাহরণ দেওয়া হল:
উদাহরণ: CSS ভিত্তিক Srallax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Srallax Scrolling Example</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.parallax {
position: relative;
background-image: url('your-image.jpg');
height: 100vh;
background-attachment: fixed; /* প্যারালাক্স ইফেক্ট তৈরি করতে */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
height: 2000px;
background-color: white;
text-align: center;
padding: 50px;
}
</style>
</head>
<body>
<div class="parallax"></div> <!-- প্যারালাক্স ব্যাকগ্রাউন্ড -->
<div class="content">
<h1>Welcome to Srallax Scrolling!</h1>
<p>This is a simple parallax effect.</p>
</div>
</body>
</html>
ব্যাখ্যা:
background-attachment: fixed;প্রপার্টি ব্যাকগ্রাউন্ড ইমেজের অবস্থান স্থির রাখে, ফলে স্ক্রল করার সময় ব্যাকগ্রাউন্ড এবং কন্টেন্টের মধ্যে গতির পার্থক্য তৈরি হয়।background-position: center;এবংbackground-size: cover;প্যারালাক্স ব্যাকগ্রাউন্ডের সঠিক অবস্থান এবং আকার নির্ধারণ করে।
এই কোডটি একটি সিম্পল প্যারালাক্স ইফেক্ট তৈরি করবে যেখানে স্ক্রল করার সময় ব্যাকগ্রাউন্ড ইমেজের গতির পার্থক্য হবে এবং তা স্ক্রলিংয়ের সঙ্গে স্থির থাকবে।
JavaScript এর মাধ্যমে Srallax Scrolling কনফিগারেশন
কখনও কখনও CSS শুধুমাত্র প্যারালাক্স ইফেক্টের জন্য যথেষ্ট নয় এবং JavaScript ব্যবহার করতে হতে পারে। JavaScript দিয়ে প্যারালাক্স স্ক্রলিং আরও ডাইনামিক এবং নিয়ন্ত্রণযোগ্য হতে পারে। এখানে একটি উদাহরণ দেওয়া হল যা window.scroll ইভেন্ট ব্যবহার করে প্যারালাক্স ইফেক্ট তৈরি করবে।
উদাহরণ: JavaScript ভিত্তিক Srallax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Srallax Scrolling with JavaScript</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.parallax {
position: relative;
height: 100vh;
background-image: url('your-image.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
will-change: transform;
}
.content {
height: 2000px;
background-color: white;
text-align: center;
padding: 50px;
}
</style>
</head>
<body>
<div class="parallax"></div> <!-- প্যারালাক্স ব্যাকগ্রাউন্ড -->
<div class="content">
<h1>Welcome to Srallax Scrolling with JavaScript!</h1>
<p>Scroll down to see the effect.</p>
</div>
<script>
window.addEventListener('scroll', function() {
let parallax = document.querySelector('.parallax');
let scrollPosition = window.pageYOffset;
parallax.style.transform = 'translateY(' + scrollPosition * 0.5 + 'px)';
});
</script>
</body>
</html>
ব্যাখ্যা:
- JavaScript এ
window.addEventListener('scroll', function() {...})ইভেন্ট ব্যবহার করা হয়েছে, যা স্ক্রল ইভেন্টের মাধ্যমেscrollPositionনির্ধারণ করে। - তারপর
parallax.style.transform = 'translateY(' + scrollPosition * 0.5 + 'px)';কোডটি ব্যাকগ্রাউন্ডের স্থান পরিবর্তন করে, যা প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করে।
এখানে scrollPosition * 0.5 ব্যবহার করে স্ক্রলিংয়ের গতির সাথে ব্যাকগ্রাউন্ডের গতিকে ধীর করা হয়েছে। আপনি সংখ্যাটি পরিবর্তন করে প্যারালাক্স ইফেক্টের গতির পার্থক্য নিয়ন্ত্রণ করতে পারেন।
CSS এবং JavaScript এর মধ্যে পার্থক্য
- CSS প্যারালাক্স: CSS দিয়ে প্যারালাক্স স্ক্রলিং খুবই সহজ এবং কমপ্লেক্স না। তবে এটি কেবল নির্দিষ্ট পরিস্থিতিতেই কাজ করে যেমন ব্যাকগ্রাউন্ড ইমেজের জন্য।
- JavaScript প্যারালাক্স: JavaScript দিয়ে আপনি আরও ডাইনামিকভাবে প্যারালাক্স স্ক্রলিং কনফিগার করতে পারেন। এটি বিভিন্ন কন্টেন্ট এলিমেন্টের জন্য কাজ করতে পারে এবং স্ক্রলিংয়ের গতির আরও বেশি কন্ট্রোল প্রদান করে।
Srallax Scrolling ইফেক্ট ওয়েব ডিজাইনে চমৎকার ভিজ্যুয়াল আউটপুট প্রদান করে, এবং CSS ও JavaScript উভয় ক্ষেত্রেই এটি সহজে কনফিগার করা যায়। এটি ডিজাইনে নতুনত্ব এবং ইন্টারঅ্যাকটিভ অনুভূতি আনার জন্য একটি শক্তিশালী টুল।
Read more
